<template>
    <div>
        <!-- 表头 -->
        <div class="Head" v-if="Head">
            <!-- 客户类别 -->
            <div class="Cusgory">
                <span style="margin-right: 10px">客户类别</span>
                <el-select v-model="value" placeholder="请选择" style="margin-top: 10px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </div>
            <!-- 客户名称 -->
            <div class="Cusname">
                <span style="margin-right: 10px">客户名称</span>
                <span>
                    <el-input v-model="input" placeholder="请输入名称"></el-input>
                </span>
            </div>
            <!-- 搜索，重置按钮 -->
            <div class="But">
                <el-button type="primary" icon="el-icon-search" @click="Render()">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="Reset">重置</el-button>
            </div>
        </div>
        <!-- 表 -->
        <div class="function" style="margin-top: 10px">
            <el-button type="primary" icon="el-icon-plus" plain @click="addLists">新增</el-button>
            <el-button type="warning" icon="el-icon-download" plain @click="exports">导出</el-button>
            <div style="float: right">
                <el-tooltip class="item" effect="dark" content="隐藏搜索" placement="top">
                    <el-button icon="el-icon-search" circle @click="Display"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                    <el-button icon="el-icon-refresh" circle @click="Reset"></el-button>
                </el-tooltip>
            </div>
        </div>
        <el-table
            :data="tableData.slice((page.pageNum - 1) * page.pageSize, page.pageNum * page.pageSize)"
            class="content"
            :cell-style="rowClass"
            :header-cell-style="headClass"
        >
                <el-table-column label="序号" width="60" type="index" :index="indexMethod">     </el-table-column>
            <el-table-column prop="number" label="客户编码" width="100"></el-table-column>
            <el-table-column prop="belongName" label="所属仓储客户" width="160"></el-table-column>
            <el-table-column prop="name" label="销售客户名称" width="240"></el-table-column>
            <el-table-column prop="shortName" label="简称" width="100"></el-table-column>
            <el-table-column prop="eaddress" label="英文名称" width="100"></el-table-column>
            <el-table-column prop="address" label="联系地址" width="140"></el-table-column>
            <el-table-column prop="contacts" label="联系人" width="80"></el-table-column>
            <el-table-column prop="callNumber" label="联系电话" width="80"></el-table-column>
            <el-table-column prop="fax" label="传真" width="80"></el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row.cId)">修改</el-button>
                    <el-button @click="update(scope.row.cId)" type="text" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="Del(scope.row.cId)">删除</el-button>
                    <el-button type="text" size="small" @click="Deliverys(scope.row.cId)">地址</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加客户弹框 -->
        <el-dialog title="添加客户" :visible.sync="dialogVisible" width="55%" :before-close="handleClose" class="adframe">
            <el-form ref="form" :model="adi">
                <span style="display: block; margin-top: -20px"
                    >编号<el-input placeholder="请输入编号" v-model="adi.number"></el-input
                ></span>
                <span>销售员<el-input placeholder="请输入销售员" v-model="adi.saller"></el-input></span>
                <span>名称<el-input placeholder="请输入名称" v-model="adi.name"></el-input></span>
                <span>简称<el-input placeholder="请输入简称" v-model="adi.shortName"></el-input></span>
                <span>英文名称<el-input placeholder="请输入英文名称" v-model="adi.ename"></el-input></span>
                <span>类别<el-input placeholder="请输入类别" v-model="adi.category"></el-input></span>
                <span>联系人<el-input placeholder="请输入联系人" v-model="adi.contacts"></el-input></span>
                <span>手机号码<el-input placeholder="请输入手机号码" v-model="adi.phone"></el-input></span>
                <span>联系电话<el-input placeholder="请输入联系电话" v-model="adi.callNumber"></el-input></span>
                <span>传真<el-input placeholder="请输入传真" v-model="adi.fax"></el-input></span>
                <span>开户行<el-input placeholder="请输入开户行" v-model="adi.bank"></el-input></span>
                <span>账号<el-input placeholder="请输入账号" v-model="adi.account"></el-input></span>
                <span>税号<el-input placeholder="请输入税号" v-model="adi.tax"></el-input></span>
                <span>网址<el-input placeholder="请输入网址" v-model="adi.url"></el-input></span>
                <span>联系地址<el-input placeholder="请输入联系地址" v-model="adi.address"></el-input></span>
                <span>客户编码<el-input placeholder="请输入客户编码" v-model="adi.adinp"></el-input></span>
                <span>英文地址<el-input placeholder="请输入英文地址" v-model="adi.eaddress"></el-input></span>
                <span>国家英文<el-input placeholder="请输入国家英文" v-model="adi.econtry"></el-input></span>
                <span>省份英文<el-input placeholder="请输入省份英文" v-model="adi.eprovince"></el-input></span>
                <span>备注说明<el-input placeholder="请输入备注说明" v-model="adi.remark"></el-input></span>
                <span
                    >归属仓储客户<el-input v-model="adi.belongName" :disabled="true">
                        <el-button slot="append" @click="dialogTableVisible = true">选择</el-button>
                    </el-input></span
                >
                <span
                    >是否仓储客户<el-checkbox style="margin-left: 10px" v-model="adi.store" :true-label="1" :false-label="0"
                        >仓储客户</el-checkbox
                    ></span
                >
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dw">取 消</el-button>
                <el-button type="primary" @click="conVarSum">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加内框 -->
        <el-dialog class="size" title="归属仓储客户选择" :visible.sync="dialogTableVisible">
            <el-table :data="tableData" class="biop">
                <el-table-column prop="name" label="名称" width="130"></el-table-column>
                <el-table-column prop="address" label="地址" width="150"></el-table-column>
                <el-table-column prop="address" label="联系人" width="130"></el-table-column>
                <el-table-column prop="phone" label="电话" width="130"></el-table-column>
                <el-table-column prop="fax" label="传真" width="130"></el-table-column>
                <el-table-column prop="callNumber" label="手机" width="130"></el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="Choice(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-bottom: 20px; margin-top: 5px">
                <el-pagination
                    background
                    style="float: right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="10"
                >
                </el-pagination>
            </div>
        </el-dialog>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length"
            >
            </el-pagination>
        </div>
        <!-- 送货地址 -->
        <el-dialog title="送货地址列表" :visible.sync="Delivery" class="yu" >
            <el-button type="primary" icon="el-icon-plus" plain @click="Adde" style="margin-bottom: 10px">新增</el-button>
            <el-button type="warning" icon="el-icon-download" plain @click="exports">导出</el-button>
            <el-table :data="DtableData" >
                <el-table-column prop="date" label="默认" width="120"></el-table-column>
                <el-table-column prop="name" label="名称" width="120"></el-table-column>
                <el-table-column prop="address" label="地址" width="120"></el-table-column>
                <el-table-column prop="contacts" label="联系人" width="120"></el-table-column>
                <el-table-column prop="callNumber" label="电话" width="120"></el-table-column>
                <el-table-column prop="fax" label="传真" width="120"></el-table-column>
                <el-table-column prop="phone" label="手机" width="120"></el-table-column>
                <el-table-column label="操作"  width="100">
                    <template  slot-scope="scope">
                        <el-button type="text" size="small" @click="Upde(scope.row.aId)">修改</el-button>
                        <el-button type="text" size="small" @click="Deldeli(scope.row.aId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 添加送货地址弹框 -->
        <el-dialog title="添加客户送货地址" :visible.sync="Delivery2" width="55%" :before-close="handleClose" class="adframe">
            <el-form ref="form" :model="Addes">
                <span>名称<el-input placeholder="请输入名称" v-model="Addes.name"></el-input></span>
                <span>地址<el-input placeholder="请输入名称" v-model="Addes.address"></el-input></span>
                <span>联系人<el-input placeholder="请输入联系人" v-model="Addes.contacts"></el-input></span>
                <span>联系电话<el-input placeholder="请输入联系电话" v-model="Addes.callNumber"></el-input></span>
                <span>传真<el-input placeholder="请输入传真" v-model="Addes.fax"></el-input></span>
                <span>手机号码<el-input placeholder="请输入手机号码" v-model="Addes.phone"></el-input></span>
               <span>是否默认<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" style="margin-left:10px"></el-switch></span>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qx">取消</el-button>
                <el-button type="primary" @click="Formde">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            aId:'',
             value: true,
            Delivery: false,
            Delivery2: false,
            dialogTableVisible: false,
            dialogVisible: false,
            cId: '',
            conVa:0,

            // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
            // 客户类别
            options: [
                {
                    value: '选项1',
                    label: '全部'
                },
                {
                    value: '选项2',
                    label: '仓储客户'
                },
                {
                    value: '选项3',
                    label: '销售客户'
                }
            ],
            // 搜索输入框
            value: '',
            // 客户名称
            input: '',
            // 添加输入框
            adi: {
                account: null,
                address: null,
                bank: null,
                belong: null,
                belongName: null,
                cId: null,
                cNumber: null,
                callNumber: null,
                category: null,
                contacts: null,
                createBy: null,
                createTime: null,
                delFlag: null,
                eaddress: null,
                econtry: null,
                ename: null,
                eprovince: null,
                fax: null,
                name: null,
                number: null,
                params: null,
                phone: null,
                remark: null,
                saller: null,
                searchValue: null,
                shortName: null,
                status: null,
                store: null,
                tax: null,
                updateBy: null,
                updateTime: null,
                url: null
            },
            // 地址添加
            Addes:{
                name:null,
                contacts:null,
                address:null,
                callNumber:null,
                fax:null,
                phone:null,
                isDefault:0
            },
            conVar: 0,
            // 表
            query: {
                address: '',
                name: ''
            },
            // 数据
                // 客户的
            tableData: [],
               //客户收货地址的 
            DtableData:[],
            // 分页
            currentPage4: 4,
            // 表头隐藏
            Head: true
        };
    },
    methods: {
        // 详情
        handleClick(row) {
            console.log(row);
        },
        // 重置按钮
        Reset() {
            this.Render();
        },
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
        },
        // 页面渲染
        Render() {
            this.$axios
                .get('http://47.100.8.204:8092/wms/customer/list', {
                   store:this.store,
                   name:this.name,
                    pageSize: this.page.pageSize
                })
                .then((res) => {
                    // console.log(res.data.rows.length);
                    this.tableData = res.data.rows;
                });
        },
        // 表头显示
        Display() {
            this.Head = !this.Head;
        },
        // 删除
        Del(index) {
            // console.log(index.cId);
            this.$axios.delete('http://47.100.8.204:8092/wms/customer/' + index + '').then((res) => {
                console.log(res);
            });
        },
        //   添加弹框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        }, //新增按钮
        addLists() {
            this.resect();
            this.dialogVisible = true;
            this.Dialogtitle = '添加客户信息';
            this.conVar = 0;
        }, //修改按钮
        update(e) {
            this.Dialogtitle = '修改客户信息';
            this.conVar = 1;
            this.$axios.get(`http://47.100.8.204:8092/wms/customer/${e}`).then((res) => {
                console.log(res);
                this.adi = res.data.data;
                this.dialogVisible = true;
            });
        },
        resect() {
                // this.adi.account = null,
                this.adi.address = null,
                this.adi.bank = null,
                this.adi.belong = null,
                this.adi.belongName = null,
                this.adi.cId = null,
                this.adi.cNumber = null,
                this.adi.callNumber = null,
                this.adi.category = null,
                this.adi.contacts = null,
                this.adi.createBy = null,
                this.adi.createTime = null,
                this.adi.delFlag = null,
                this.adi.eaddress = null,
                this.adi.econtry = null,
                this.adi.ename = null,
                this.adi.eprovince = null,
                this.adi.fax = null,
                this.adi.name = null,
                this.adi.number = null,
                this.adi.params = null,
                this.adi.phone = null,
                this.adi.remark = null,
                this.adi.saller = null,
                this.adi.searchValue = null,
                this.adi.shortName = null,
                this.adi.status = null,
                this.adi.store = 0,
                this.adi.tax = null,
                this.adi.updateBy = null,
                this.adi.updateTime = null,
                this.adi.url = null;
        }, 
        Deagain(){
            this.Addes.name=null,
            this.Addes.contacts=null,
            this.Addes.address=null,
            this.Addes.callNumber=null,
            this.Addes. fax=null,
            this.Addes.phone=null,
            this.Addes.isDefault=0
        },
        //弹框提交
        conVarSum() {
            this.dialogVisible = false;
            if (this.conVar == 0) {
                // console.log("添加");
                this.$axios
                    .post('http://47.100.8.204:8092/wms/customer', {
                        ...this.adi
                    })
                    .then((res) => {
                        console.log(res);
                        this.Render();
                        this.resect();
                        this.$message.success('添加成功');
                    });
            } else {
                // console.log('修改');
                this.$axios
                    .put('http://47.100.8.204:8092/wms/customer/', {
                        ...this.adi
                    })
                    .then((res) => {
                        // console.log(res);
                        this.Render();
                        this.resect();
                        this.$message.success('修改成功');
                    });
            }
        },

        // 添加内框
        Choice(index) {
            this.adi.belongName = index.name;
            this.adi.belong = index.cId;
            this.dialogTableVisible = false;
        },
        dw() {
            this.dialogVisible = false;
            this.resect()
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 导出
        exports() {
            this.$axios.get('http://47.100.8.204:8092/wms/customer/export').then((res) => {
                console.log(res);
            });
        },
        // 送货
        adl(){
            this.Delivery2=true
        },
        qx(){
            this.Delivery2=false
        },
        // 地址
        Deliverys(a){
            console.log(a);
            this.cId=a;
            this.$axios
                .get('http://47.100.8.204:8092/wms/address/list', {
                    'cId':a,
                    pageSize: this.page.pageSize
                })
                .then((res) => {
                    console.log(res);
                    this.DtableData = res.data.rows;
                });
            this.Delivery=true
        },
         // 删除
        Deldeli(index) {
            console.log(index);
            this.aid=index
            this.$axios.delete(`http://47.100.8.204:8092/wms/address/${index}`)
            .then((res) => {
                this.Deliverys(this.cId)
                console.log(res);
            });
        },
        // 添加、修改
         //新增按钮
        Adde() {
            this.resect();
            this.Delivery2 = true;
            this.Dialogtitle = '添加客户信息';
            this.conVa = 0;
        }, //修改按钮
        Upde(e) {
            this.aId=e
            // console.log(e);
            this.Dialogtitle = '修改客户信息';
            this.conVa = 1;
            this.$axios.get(`http://47.100.8.204:8092/wms/customer/${e}`).then((res) => {
                console.log(res);
                this.adi = res.data.data;

            });
            this.Delivery2 = true;
        },
         //弹框提交
        Formde() {
            this.Delivery2 = false;
            if (this.conVa == 0) {
                // console.log("添加");
                this.$axios
                    .post('http://47.100.8.204:8092/wms/address',{
                        ...this.Addes,
                        'cId':this.cId
                    })
                    .then((res) => {
                        console.log(res);
                        this.Deliverys(this.cId)
                        this.Deagain();
                        this.$message.success('添加成功');
                    });
            } else {
                 console.log(this.aId);
                        this.cdi = res.data.data;
                this.$axios
                    .put('http://47.100.8.204:8092/wms/address',{
                        'cId':this.cId,
                        'aId':this.aId,
                        ...this.Addes,
                    })
                    .then((res) => {
                         console.log(res);
                        this.Deliverys(this.cId)
                        this.Deagain();
                        this.$message.success('修改成功');
                    });
            }
        },
    },
    mounted() {
        // 页面渲染
            // 客户的
        this.Render();
    }
};
</script>

<style scoped >
.Head {
    height: 50px;
}
/* 客户类别 */
.Cusgory {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusgory span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 客户名称 */
.Cusname {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusname span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 搜素，重置按钮 */
.But {
    height: 100%;
    float: left;
}
.But button {
    margin-top: 10px;
}
/* 表 */
.content {
    margin: 10px auto;
    padding: 0px;
    background: #f8f8f9;
    font-size: 13px;
    text-align: center !important;
    color: #515a6d !important;
}
.adframe span {
    display: block;
    margin-bottom: 10px !important;
}
.yu /deep/ .el-dialog{
    width: 1000px !important;
}
</style>